<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('新增系统首页导航')"/>
        <th:block th:include="include :: bootstrap-fileinput-css"/>
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-navigation-add">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">所在页面：</label>
                    <div class="col-sm-8">
                        <input name="pageon" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">名称：</label>
                    <div class="col-sm-8">
                        <input name="name" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">图片：</label>
                    <div class="col-sm-8">
                        <input id="fileinput1" type="file" data-min-file-count="1"  data-theme="fas" >
                        <input id="photopath" name="photopath" type="hidden">
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">链接类型：</label>
                    <div class="col-sm-8">
                        <select name="urltype" class="form-control m-b"
                                th:with="type=${@dict.getType('sys_homeurl_type')}" required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">链接：</label>
                    <div class="col-sm-8">
                        <input name="url" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">排序id：</label>
                    <div class="col-sm-8">
                        <input name="sortid" class="form-control" type="text" required>
                    </div>
                </div>
            </form>
        </div>
        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: bootstrap-fileinput-js"/>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#fileinput1").fileinput({
                    'theme': 'fas',
                    overwriteInitial: false,
                    initialPreviewAsData: true,
                    showUpload: false,
                    autoReplace: true,
                    allowedFileExtensions: ["jpg","jpeg","png","gif"]
                });
                $("#fileinput1").on("filebatchselected",function(event, files) {
                    var formFile = new FormData();
                    formFile.append("file", files[0]);
                    $.ajax({
                        type: 'post',
                        url: "/upload",
                        cache: false,   //上传文件无需缓存
                        processData: false,   // 用于对参数进行序列化处理，这里必须设为false
                        contentType: false, // 必须
                        data: formFile,
                        success: function (res) {
                            if(res.result == "ok"){
                                $("#photopath").val(res.data);
                            }
                        }
                    });
                })
            });
        </script>
        <script th:inline="javascript">
            var prefix = ctx + "system/navigation"

            $("#form-navigation-add").validate({
                focusCleanup: true
            });

            function submitHandler() {
                if ($.validate.form()) {
                    $.operate.save(prefix + "/add", $('#form-navigation-add').serialize());
                }
            }
        </script>
    </body>
</html>